<%--
  Created by IntelliJ IDEA.
  User: Edward_yang
  Date: 2017/12/20 0014
  Time: 9:02
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/commons/global.jsp" %>
<!DOCTYPE html>
<html>
<body style="padding:0px" >
<script type="text/javascript" src="${staticPath }/static/autoCompleteData.js" charset="utf-8"></script>
<script  type="text/javascript">
    var arrSrc = [];//初始一个数组存放图片路径
    var provinceId = 0;
    var cityId = 0;
    var areaId = 0;
    var areaIds ="${seller.areaIds}";
    areaIds = areaIds.split(",");
    if (areaIds.length == 1) {
        provinceId = areaIds[0];
    } else if (areaIds.length == 2) {
        provinceId = areaIds[0];
        cityId = areaIds[1];
    } else if (areaIds.length > 2) {
        provinceId = areaIds[0];
        cityId = areaIds[1];
        areaId = areaIds[2];
    } else {
        provinceId = 0;
        cityId = 0;
        areaId = 0;
    }

    //初始化分类树
    $(function(){
        $('#categoryIds').combotree({
            url : '${path }/category/allTree.do',
            multiple: true,
            onlyLeafCheck:true,
            cascadeCheck : false,
            parentField : 'pid',
            lines : true,
            panelHeight : 'auto',
            onLoadSuccess:function(node,data){
                var checkedIds = "${seller.categoryIds}";
                $('#categoryIds').combotree("setValues",checkedIds.split(","));
                buildLabels("${seller.id}");
            },
            onCheck:function(node, checked){
                if(node.children == 'undefined'|| node.children == null || node.children.length <= 0){
                    $("#labels").empty();
                }
            }
        });
    });

    /**
     * 构建标签
     */
    function buildLabels(sellerId){
        var categoryIds = $("#categoryIds").combotree('getValues');
        if(categoryIds == null || categoryIds.length <= 0){
            $.messager.alert("系统提示", "先选择分类!","warning");
            return;
        }
        categoryIds = categoryIds.join(",");
        var qurl = "${path }/label/buildLabelds.do";
        if(sellerId != null && sellerId != ""){
            qurl = qurl + "?sellerId=" + sellerId;
        }else{
            qurl = qurl + "?sellerId=-1";
        }
        $("#labels").empty();
        $.ajax({
            type: "POST",
            dataType: "JSON",
            url:qurl,
            data: {"classifyIds": categoryIds},
            success: function(data){
                if(data.success){
                    $("#labels").append(data.msg);
                }
            },
            error:function(){
                $.messager.progress("close");
                $.messager.alert("构建标签失败", "服务器连接失败!","error");
            }
        });
    }

    //提交from数据
    function submitForm() {
        progressLoad();
        $.ajax({
            cache: true,
            type: "POST",
            url:"${path }/seller/edit.do",
            data:$('#saveinfoSeller').serialize(),// 你的formid
            async: false,
            error: function(request) {
                progressClose();
                $.messager.alert("删除失败", "服务器连接失败!","error");
            },
            success: function(data) {
                progressClose();
                if (data.success) {
                    $.messager.alert("系统提示", "保存成功","info",function(){
                        closeWin('modelEdit');
                        reloadSellerDataGrid();
                    });

                }else{
                    progressClose();
                    $.messager.alert("系统提示", data.msg,"error");
                }
            }
        });

    }
</script>
<style type="text/css">
    .grid{
        font:12px arial,helvetica,sans-serif;
        border: 0px solid #8DB2E3;width:100%;
        border-collapse:collapse;
    }
    .grid td{
        font:100% arial,helvetica,sans-serif;
        text-align: center;
        height:40px;
        border:1px solid #e0e0e0;
        padding-left:5px}
    .tdcc{
        height:40px;
        width: 80px;
        background-color: rgb(250,250,250);
    }
    .tdcc1{
        height:40px;
        width:150px;
    }
    .imgDelete{
        display: inline-block;
        height: 17px;
        width: 17px;
        border-radius: 50%;
        background-color: #888;
        text-align: center;
        color: #fff;
        line-height: 16px;
        font-size: 12px;
        cursor: pointer;
        position: absolute;
        right: -8px;
        top: -8px;
    }
    .dragItemBox{
        position: relative;margin-right: 10px;margin-top: 5px;float: left;
    }
</style>
<form id="saveinfoSeller" action="" method="post">
    <div class="easyui-tabs"  data-options="tabWidth:120"  style="width:100%;height:533px ;padding:0px">
        <!--商家基本信息Start-->
        <div title="商家基本信息"  data-options="iconCls:'icon-edit'" style="padding:20px">
            <table class="grid" align="center">
                <tr >
                    <td  class="tdcc2" colspan="6"><h2>商家基本信息</h2></td>
                </tr>
                <tr>
                    <td class="tdcc">商家名称:</td>
                    <td class="tdcc1">  <input class="easyui-validatebox" name="name" data-options="required:true" value="${seller.name}"/></td>
                    <td  class="tdcc">用户账号:</td>
                    <td tdcc1>
                        <input type="hidden" name="id" value="${seller.id}" >
                        <input type="hidden" name="userId" value="${seller.userId}" >
                        <input class="easyui-validatebox"  readonly="readonly" value="${userPhone}"   title="此信息不可编辑,请到用户管理修改!" style="background-color: #e0e0e0;" />
                    </td>

                    <td colspan="2" rowspan="2"><img height="100px" width="100px" src="${seller.logo}" id="tpyl"/></td>
                </tr>
                <tr>
                    <td class="tdcc">联系电话:</td>
                    <td class="tdcc1">  <input class="easyui-validatebox" onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')" name="tel" data-options="required:true" value="${seller.tel}"/></td>
                    <td class="tdcc">接收短信电话:</td>
                    <td class="tdcc1"> <input class="easyui-validatebox" onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')" name="phone" data-options="required:true" value="${seller.phone}"/></td>
                </tr>
                <tr>
                    <td class="tdcc">地址:</td>
                    <td class="tdcc1"><input class="easyui-validatebox" name="address" data-options="required:true" value="${seller.address}"/></td>
                    <td class="tdcc">虚拟预约数量:</td>
                    <td class="tdcc1">  <input class="easyui-validatebox" onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')" name="virtualAppointmentCount" data-options="required:true" value="${seller.virtualAppointmentCount}"/></td>
                    <td colspan="2">
                        <div id="upload_ue"></div>
                        <span>商家logo:</span>
                        <input class="easyui-validatebox"  id="logo"  readonly="readonly"  name="logo" data-options="required:true" value="${seller.logo}"/>
                        <a href="javascript:void(0);"  class="easyui-linkbutton" data-options="iconCls:'icon-edit'" onclick="upImage();">上传图片</a>
                    </td>
                    <script type="text/javascript">
                        var _editor;
                        $(function() {
                            //重新实例化一个编辑器，防止在上面的editor编辑器中显示上传的图片或者文件
                            _editor = UE.getEditor('upload_ue',{
                                serverUrl:"${path}/file/upload.do?compress=1"
                            });

                            _editor.ready(function () {
                                //设置编辑器不可用
                                // _editor.setDisabled();
                                //隐藏编辑器，因为不会用到这个编辑器实例，所以要隐藏
                                _editor.hide();
                                //侦听图片上传
                                _editor.addListener('beforeInsertImage', function (t, arg) {
                                    //有多少张图片arg.length就是多大
                                    $("#logo").val(arg[0].src);
                                    $("#tpyl").attr("src",arg[0].src);
                                });
                            });
                        });
                        //弹出图片上传的对话框
                        function upImage() {
                            var myImage = _editor.getDialog("insertimage");
                            myImage.open();
                        }
                    </script>
                </tr>
                <tr>
                    <td class="tdcc">虚拟评论数量:</td>
                    <td class="tdcc1">  <input class="easyui-validatebox" onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')" name="virtaulCommentCount" data-options="required:true" value="${seller.virtaulCommentCount}"/></td>
                    <td class="tdcc">虚拟收藏数:</td>
                    <td class="tdcc1"> <input class="easyui-validatebox" onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')"  name="virtualCollectAccount" data-options="required:true" value="${seller.virtualCollectAccount}"/></td>
                    <td  class="tdcc">排序:</td>
                    <td tdcc1><input class="easyui-validatebox" onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')" name="ord" data-options="required:true" value="${seller.ord}"/></td>
                </tr>
                <tr>
                    <td class="tdcc">省份:</td>
                    <td class="tdcc1">
                        <input type="hidden" value="${seller.oneAreaName}" name="oneAreaName" id="provinceName" >
                        <input id="delivery_address_province" class="easyui-combobox"  name="oneAreaId"
                               data-options="missingMessage:'请选择省份',
                                         url:'${path}/areaInfo/addressList.do?type=1',
                                         valueField:'id',
                                         textField:'name',
                                         required:true,
                                         editable:false,
                                         onLoadSuccess:function(data){
                                            if (data.length > 0) {
                                                if (provinceId != 0) {
                                                    $(this).combobox('setValue', provinceId);
                                                } else {
                                                    $(this).combobox('setValue',data[0].id);
                                                    $('#provinceName').val(data[0].name);
                                                }
                                            } else {
                                                $('#provinceName').val('');
                                            }
                                         },
                                         onChange: function (newValue, oldValue){
                                             $('#delivery_address_city').combobox('reload','${path}/areaInfo/addressList.do?type=2&pid='+newValue);
                                         },
                                         onSelect:function(data){
                                             provinceId = 0;
                                             cityId = 0;
                                             areaId = 0;
                                             $('#provinceName').val(data.name);
                                         }" />
                    </td>
                    <td class="tdcc">城市:</td>

                    <td class="tdcc1">
                        <input type="hidden" value="${seller.twoAreaName}" name="twoAreaName" id="cityName">
                        <input id="delivery_address_city" class="easyui-combobox "  name="twoAreaId"
                               data-options="missingMessage:'请选择城市',
                                         valueField:'id',
                                         textField:'name',
                                         required:true,
                                         editable:false,
                                         onLoadSuccess:function(data){
                                            <%--if(city != 0){--%>
                                                <%--$(this).combobox('setValue',city);--%>
                                            <%--}else{--%>
                                                <%--$(this).combobox('setValue',data[0].id);--%>
                                                <%--$('#edit_cityId').val(data[0].id);--%>
                                                <%--$('#edit_city').val(data[0].name);--%>
                                            <%--}--%>
                                            if (data.length > 0 ) {
                                                if (cityId != 0) {
                                                    $(this).combobox('setValue',cityId);
                                                } else {
                                                    $(this).combobox('setValue',data[0].id);
                                                    $('#cityName').val(data[0].name);
                                                }
                                            } else {
                                                $('#delivery_address_city').combobox('clear');
                                                $('#cityName').val('');
                                            }
                                         },
                                         onChange: function (newValue, oldValue){
                                             $('#delivery_address_area').combobox('reload','${path}/areaInfo/addressList.do?type=3&pid='+newValue);
                                         },
                                         onSelect:function(data){
                                             cityId = 0;
                                             areaId = 0;
                                             <%--$('#edit_cityId').val(data.id);--%>
                                             $('#cityName').val(data.name);
                                         }"/> </td>
                    <td  class="tdcc">区域:</td>
                    <td class="tdcc1">
                        <input type="hidden" value="${seller.threeAreaName}" name="threeAreaName" id="areaName" >
                        <input id="delivery_address_area" class="easyui-combobox "  name="threeAreaId"
                               data-options="missingMessage:'请选择区县' ,
                                         valueField:'id' ,
                                         textField:'name',
                                         editable:false,
                                         onLoadSuccess:function(data){
                                            <%--if(area != 0){--%>
                                                <%--$(this).combobox('setValue',area);--%>
                                            <%--}else{--%>
                                                <%--$(this).combobox('setValue',data[0].id);--%>
                                                <%--$('#edit_areaId').val(data[0].id);--%>
                                                <%--$('#edit_area').val(data[0].name);--%>
                                            <%--}--%>
                                            if (data.length > 0) {
                                                if (areaId != 0) {
                                                    $(this).combobox('setValue',areaId);
                                                } else {
                                                    $(this).combobox('setValue',data[0].id);
                                                    $('#areaName').val(data[0].name);
                                                }
                                            } else {
                                                $('#delivery_address_area').combobox('clear');
                                                $('#areaName').val('');
                                            }
                                         },
                                         onSelect:function(data){
                                             areaId = 0;
                                             <%--$('#edit_areaId').val(data.id);--%>
                                             $('#areaName').val(data.name);
                                         }" />
                    </td>
                </tr>
                <tr>
                    <td class="tdcc">营业时间通知:</td>
                    <td><textarea  name="businessHours" class="easyui-validatebox"  style="width: 140px   ; height: 80px;resize:none;" >${seller.businessHours} </textarea></td>
                    <td class="tdcc">机构简介:</td>
                    <td  colspan="3" > <textarea  name="des" class="easyui-validatebox"  style="width: 500px   ; height: 80px;resize:none;">${seller.des}</textarea></td>
                </tr>


            </table>
        </div>
        <!--****************************************************end**********************************************************************************************************************************************************************************************************-->
        <!--商家标签-->
        <div title="商家标签"  data-options="iconCls:'icon-edit'" style="padding:20px">
            <table class="grid" align="center">
                <tr>
                    <td>商家分类:</td>
                    <td>
                        <select id="categoryIds" name="categoryIds" style="width: 200px; height: 29px;"></select>
                        <a href="javascript:void(0);"  class="easyui-linkbutton" onclick="buildLabels('${seller.id}');">加载标签</a>
                    </td>
                </tr>
                <tr>
                    <td>商家标签:</td>
                    <td id="labels"></td>
                </tr>
            </table>
        </div>
        <!--****************************************************end**********************************************************************************************************************************************************************************************************-->
        <div title="商家图片"  data-options="iconCls:'icon-edit'" style="padding:20px">
            <script type="text/javascript">
                //单图
                <%--console.log("${seller.img}");--%>
                //多图
                <%--console.log("${imgsString}");--%>
                var sellerImg= "${seller.img}"
                var imgsString= "${imgsString}"

                if(sellerImg){
                    addImgSingle(sellerImg);
                }
                if(imgsString){
                    var arr = imgsString.substring(0,imgsString.length-1).split(",");
                    var arr2 = [];
                    arr.map(function(ele,index){
                        arr2.push({src:ele})
                    });
                    addImgGroup(arr2);
                }
                <%--如果有图片数据则默认展示现有数据--%>
                /*    if(1){
                 addImgSingle("url")
                 addImgGroup([{src:"url"}])
                 }*/



                //============================================单图============================================
                <%--删除图片点击事件--%>
                function deteleImgSingle(obj){
                    $(obj).parents("#hospitalSingle").find("img").remove();
                    $(obj).remove();
                    $("#hospitalSingleInput").val("");
                }
                function addImgSingle(src){
                    $("#hospitalSingle").html(
                        '<img src="'+src+'"   alt="商家图片" style="max-width:150px;max-height: 150px;border: 1px solid #eeeeee;">' +
                        '<span class="imgDelete" onclick="deteleImgSingle(this)">x</span>');
                    $("#hospitalSingleInput").val(src);
                }

                var _editor2;
                //重新实例化一个编辑器，防止在上面的editor编辑器中显示上传的图片或者文件
                _editor2 = UE.getEditor('upload_ue2',{
                    serverUrl:"${path}/file/upload.do?compress=1"
                });
                _editor2.ready(function () {
                    //隐藏编辑器，因为不会用到这个编辑器实例，所以要隐藏
                    _editor2.hide();
                    //侦听图片上传
                    _editor2.addListener('beforeInsertImage', function (t,arg) {

                        addImgSingle(arg[arg.length-1].src);
                    });
                });
                //弹出单张图片上传的对话框
                function upImageSingle() {
                    var myImage = _editor2.getDialog("insertimage");
                    myImage.open();
                }

                //============================================多图============================================
                <%--删除图片点击事件--%>

                function deteleImgGroup(obj){
                    // var src = $(obj).prev().attr("src");
                    var index = $(obj).parent().index();
                    $(obj).parent().remove();
                    arrSrc.splice(index,1);
                    $("#hospitalGroupInput").val(arrSrc.join(','));
                }
                function addImgGroup(arg) {
                    arg.map(function(ele,index){
                        $("#hospitalGroup").append(
                            '<div class="dragItemBox">'+
                            '<img src="'+ele.src+'" alt="商家图片" style="max-width:150px;max-height: 150px;border: 1px solid #eeeeee;">'+
                            '<span class="imgDelete" onclick="deteleImgGroup(this)">x</span>'+
                            '</div>'
                        );
                        arrSrc.push(ele.src);
                    });
//                        每次上传事件触发都重新绑定拖拽事件
                    $('.dragItemBox').unbind('draggable');

                    $('.dragItemBox').draggable({
                        deltaX:0,
                        deltaY:0
                    }).droppable({
                        onDrop:function(e,source){
                            $(source).after(this);
                            $(source).removeAttr('style').siblings().removeAttr('style');
//                                顺序修改后需要重新修改上传的input值

                            arrSrc = [];
                            $(this).parent().find('.dragItemBox img').each(function(){
                                arrSrc.push($(this).attr('src'));
                            });
                            $("#hospitalGroupInput").val(arrSrc.join(","));


                        }
                    });


                    $("#hospitalGroupInput").val(arrSrc.join(","));
                }


                var _editor3;
                //重新实例化一个编辑器，防止在上面的editor编辑器中显示上传的图片或者文件
                _editor3 = UE.getEditor('upload_ue3',{
                    serverUrl:"${path}/file/upload.do?compress=1"
                });


                _editor3.ready(function () {
                    //隐藏编辑器，因为不会用到这个编辑器实例，所以要隐藏
                    _editor3.hide();
                    //侦听图片上传
                    _editor3.addListener('beforeInsertImage', function (t,arg) {
                        addImgGroup(arg);
                    });
                });
                //弹出单张图片上传的对话框
                function upImageGroup(){
                    var myImage = _editor3.getDialog("insertimage");
                    myImage.open();
                }

            </script>
            <div style="border: 1px solid #e0e0e0">
            <p>商家图片</p>
            <hr/>
            <table border="0">
                <tr>
                    <td><a href="javascript:void(0);"  class="easyui-linkbutton" data-options="iconCls:'icon-edit'" onclick="upImageSingle();">上传单张图片</a></td>
                </tr>
                <tr>
                    <td>
                        <div id="upload_ue2"></div>
                        <input type="hidden" id="hospitalSingleInput" name="img">
                        <div style="position: relative;float: left;margin-top: 5px;" id="hospitalSingle">

                        </div>
                    </td>
                </tr>
            </table>
            <hr/>
            <table border="0">
                <tr>
                    <td><a href="javascript:void(0);"  class="easyui-linkbutton" data-options="iconCls:'icon-edit'" onclick="upImageGroup();">上传多张图片</a></td>
                </tr>
                <tr>
                    <td>
                        <div id="upload_ue3"></div>
                        <input type="hidden" id="hospitalGroupInput" name="imgsUrl">
                        <div id="hospitalGroup">

                        </div>
                    </td>
                </tr>
            </table>
            </div>
        </div>
        <!--************************************************************************************************end*********************************************************************************************************************************************************-->
        <style>
            .td1{
                border: 1px solid #e0e0e0;
                background-color: #e0e0e0;
                text-align: center;
                height: 60px;
            }
        </style>
        <div title="图文详情" data-options="iconCls:'icon-edit'" style="padding:20px">
            <table style=" border: 1px solid #e0e0e0;">
                <tr>
                    <td class="td1"><h2>机构详情</h2></td>
                </tr>
                <tr>
                    <td>
                        <div>
                            <textarea id="editor" style="height:400px;"  name="detail">${seller.detail}</textarea>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="td1"><h2>体检须知</h2></td>
                </tr>
                <tr>
                    <td>
                        <div>
                            <textarea id="editor1" style="height:400px;"  name="buyInfo">${seller.buyInfo}</textarea>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="td1"><h2>预约流程</h2></td>
                </tr>
                <tr>
                    <td>
                        <div>
                            <textarea id="editor2" style="height:400px;"  name="appointmentInfo">${seller.appointmentInfo}</textarea>
                        </div>
                    </td>
                </tr>
            </table>
        </div>
        <script type="text/javascript">
            //实例化编辑器
            //建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例
            var ue = UE.getEditor('editor',{
                serverUrl:"${path}/file/upload.do"
            });
            //实例化编辑器
            //建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例
            var ue1 = UE.getEditor('editor1',{
                serverUrl:"${path}/file/upload.do"
            });
            //实例化编辑器
            //建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例
            var ue2 = UE.getEditor('editor2',{
                serverUrl:"${path}/file/upload.do"
            });
        </script>
    </div>
    <div  data-options="region:'south',border:false" style="height: 24px; padding-top: 8px;text-align: center" >
        <a  class="easyui-linkbutton" icon="icon-save" onclick="submitForm()" >保存</a>
        <a  class="easyui-linkbutton" icon="icon-cancel" onclick="closeWin('modelEdit')" >取消</a>
    </div>
</form>
</body>
</html>